import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import _isUndefined from 'lodash/isUndefined'
import AtAddressSelector from '../../components/taroui/address-selector'
import mockData from './mock-data'
import './index.scss'

mockData.forEach(item => {
  item.key = item.id
})
export default class Index extends Taro.Component {
  config = {
    navigationBarTitleText: 'R Taro UI'
  }
  value1 = []
  value2 = [{ name: '福建', key: 's2', disabled: true }]
  value3 = [
    { name: '福建', key: 's2' },
    { name: '厦门', key: 's53' },
    { name: '湖里区', key: 's402' },
    { name: '湖里街道', key: 's405' }
  ]

  state = {
    defaultValue1: [],
    defaultValue2: [{ name: '福建', key: 's2', disabled: true }],
    defaultValue3: [
      { name: '福建', key: 's2' },
      { name: '厦门', key: 's53' },
      { name: '湖里区', key: 's402' },
      { name: '湖里街道', key: 's405' }
    ],
    defaultValue4: [],
    value4: [],
    hintList: ['请选择省份', '请选择城市', '请选择县', '请选择街道'],
    visible3: false
  }

  formatMockData(dataItem) {
    // 无数据时设置data为[],自动关闭窗口
    const data = JSON.parse(JSON.stringify(mockData))
    const filterList = data.filter(item => {
      return _isUndefined(dataItem) ? _isUndefined(item.pid) : item.pid === dataItem.key
    })
    const dataListObj = {}
    filterList.forEach(item => {
      if (_isUndefined(dataListObj[item.idx])) {
        dataListObj[item.idx] = {
          title: item.idx,
          key: item.idx,
          items: []
        }
      }
      dataListObj[item.idx].items.push(item)
    })
    const dataList = []
    for (const key in dataListObj) {
      dataList.push(dataListObj[key])
    }
    dataList.sort((a, b) => {
      return a.title.charCodeAt() - b.title.charCodeAt()
    })
    return dataList
  }
  loadData = dataItem => {
    console.log(dataItem)
    return new Promise(resolve => {
      const data = this.formatMockData(dataItem)
      resolve(data)
    })
  }
  onChange = (value, key) => {
    this[key] = value
  }
  render() {
    let addressInfo4 = ''
    this.state.value4.forEach(item => {
      addressInfo4 += `${item.name} `
    })
    return (
      <View className='page picker__page'>
        {/* E Header */}

        {/* S Body */}
        <View className='doc-body'>
          {/* 普通选择器 */}
          <View className='panel'>
            <View className='panel__title'>基本使用</View>
            <View>
              <View className='example-item'>
                <AtAddressSelector
                  label='选择地址'
                  placeholder='选择'
                  defaultValue={this.state.defaultValue3}
                  onChange={value => {
                    this.onChange(value, 'value3')
                  }}
                  visible={this.state.visible3}
                  onClick={() => {
                    this.setState({ visible3: true })
                  }}
                  onLoadData={this.loadData}
                  onClose={() => {
                    this.setState({ visible3: false })
                  }}
                ></AtAddressSelector>
              </View>
             
            </View>
          </View>
        </View>
        {/* E Body */}
      </View>
    )
  }
}
